<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物招领系统 - 首页</title>
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/system/css/all.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/system/css/select2.min.css}">
    <!--外观 得放select下面，不然下拉栏会乱-->
    <link rel="stylesheet" th:href="@{/system/css/adminlte.min.css}">
    <!-- Toastr -->
    <link rel="stylesheet" th:href="@{/system/css/toastr.min.css}">
    <style>
        .post-hover:hover{
            opacity: 0.7;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/system/header::header-nav"></div>
    <div th:replace="pc/system/header::header-nav-model"></div>

    <div style="width: 100%; margin-top: 20px;">
        <!-- 轮播图一栏 -->
        <div style="display: flex; justify-content: center">
            <!-- 轮播图 -->
            <div id="indexCarousel" class="carousel slide" data-ride="carousel" style="width: 600px;">
                <!-- 替换 -->
                <ol id="carouselIndicators" class="carousel-indicators">
                </ol>
                <div id="carouselInner" class="carousel-inner" style="height: 387px">
                </div>
                <a class="carousel-control-prev" href="#indexCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#indexCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                <!---->
            </div>
            <!-- 热帖 -->
            <div style="width: 300px;">
                <div id="hotPosts" class="card"
                     style="padding: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0;">
                    <div style="border-bottom: 1px solid #adb5bd">
                        <h3>
                            <span style="color: #ff1e00"><i class="nav-icon fa fa-fire-alt"></i></span>
                            <b>热门</b></h3>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新帖子 -->
        <div style="background-color: rgba(0, 0, 0, .03); margin-top: 4px">
            <div style="display: flex; justify-content: center; align-items:center; height:50px; padding-top: 10px; margin-bottom: 10px">
                <div style="width: 900px;">
                    <h3>
                        <span style="color: #ec951e;"><i class="nav-icon fa fa-paper-plane"></i></span>
                        <b>新发布</b>
                    </h3>
                </div>
            </div>
            <div class="w-100" style="display: flex; justify-content: center;">
                <div style="width: 900px; ">
                    <div id="newLostPosts" style="display: flex;">
                        <!--<div class="card card-danger card-outline" style="width: 216px">
                            <div style="width: 100%; height: 216px; padding: 10px">
                                <img style="width: 100%; height: 100%;" src=""
                                     alt="主图">
                            </div>
                            <div style="width: 100%; padding: 10px">
                                <a href="#" style="color: #000000">
                                    <h5>标题标题标题标...</h5>
                                    <span style="opacity: 0.5">
                                        <span>津南区 03-09</span>
                                        <span style="color: #ffc107">哈士奇</span>
                                        <span style="color: #dc3545">丢失</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="card card-danger card-outline" style="width: 216px; margin-left: 12px">
                        </div>-->
                    </div>
                    <div id="newFoundPosts" style="display: flex">
                        <!--<div class="card card-info card-outline" style="width: 216px">
                            <div style="width: 100%; height: 216px; padding: 10px">
                                <img style="width: 100%; height: 100%;" src=""
                                     alt="主图">
                            </div>
                            <div style="width: 100%; padding: 10px">
                                <a href="#" style="color: #000000">
                                    <h5>标题标题标题标...</h5>
                                    <span style="opacity: 0.5">
                                        <span>津南区 03-09</span>
                                        <span style="color: #ffc107">哈士奇</span>
                                        <span style="color: #17a2b8">丢失</span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <div class="card card-info card-outline" style="width: 216px; margin-left: 12px">-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script th:src="@{/system/js/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/system/js/bootstrap.bundle.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/system/js/select2.full.min.js}"></script>
<!-- Bootstrap Switch -->
<script th:src="@{/system/js/bootstrap-switch.min.js}"></script>
<!-- Toastr -->
<script th:src="@{/system/js/toastr.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/system/js/adminlte.js}"></script>
<!-- 自己 -->
<script th:src="@{/system/js/header.js}"></script>
<script th:src="@{/system/js/index.js}"></script>
<!-- 内联js，必须要加th:inline，这是Thymeleaf的写法-->
<script th:inline="javascript">
    /* 轮播图 */
    var carousels = [[${carousels}]]; // 获取轮播图
    var carouselIndicators = $('#carouselIndicators');
    var carouselInner = $('#carouselInner');
    // 动态生成
    for (let i = 0; i < carousels.length; i++) {
        // 指示器
        let indicator = $('<li>').attr('data-target', '#indexCarousel')
            .attr('data-slide-to', i);
        // 轮播图项
        let carouselItem = $('<div>').addClass('carousel-item h-100');
        if (i === 0) {
            // 第一张图片显示
            indicator.addClass('active');
            carouselItem.addClass('active');
        }
        carouselIndicators.append(indicator); // 添加指示器
        let a = $('<a>').attr({'href': carousels[i].redirectUrl, 'target': '_blank'}); // 跳转链接
        a.append($('<img>').attr({'src': carousels[i].carouselUrl, 'alt': '轮播图'})
            .addClass('d-block w-100 h-100'));
        carouselItem.append(a);
        carouselInner.append(carouselItem); // 添加轮播图项
    }
</script>
<script th:inline="javascript">
    /* 热帖 */
    var hotPost = [[${indexPetPostVOS}]];
    var hotPosts = $('#hotPosts');
    for (let i = 0; i < hotPost.length; i++) {
        let div = $('<div>').css('padding', '8px');
        let a = $('<a>').css('color', '#ec951e').attr('href', '/post/detail/' + hotPost[i].postId)
            .attr('target', '_blank').addClass("post-hover");
        let h4 = $('<h4>').text(hotPost[i].postTitle);
        let h6 = $('<h6>').css('opacity', '0.6');
        let span1 = $('<span>').text(hotPost[i].petCategoryName).css('margin-right', '20px');
        let span2 = $('<span>').text(hotPost[i].postTypeName).css('margin-right', '20px');
        if (hotPost[i].postTypeName === '丢失') span2.css('color', '#dc3545');
        else span2.css('color', '#17a2b8');
        let eye = $('<i>').addClass('fas fa-eye');
        // h6
        h6.append(span1);
        h6.append(span2);
        h6.append(eye);
        h6.append(' ' + hotPost[i].views);
        // a
        a.append(h4);
        // div
        if (i !== hotPost.length - 1) {
            div.css('border-bottom', '1px solid #adb5bd');
        }
        div.append(a);
        div.append(h6);
        // host
        hotPosts.append(div);
    }
</script>
<script th:inline="javascript">
    var newLostPosts = [[${newLostPosts}]];
    var newFoundPosts = [[${newFoundPosts}]];
    var newLostPostsDiv = $('#newLostPosts');
    var newFoundPostsDiv = $('#newFoundPosts');
    newLostPostsDiv.empty();
    newFoundPostsDiv.empty();
    create(newLostPostsDiv, newLostPosts, 'card-danger', '#dc3545');
    create(newFoundPostsDiv, newFoundPosts, 'card-info', '#17a2b8');

    function create(body, data, cardColor, TypeColor) {
        for (let i = 0; i < data.length; i++) {
            let div = $('<div>').addClass('card card-outline').css('width', '216px').addClass(cardColor);
            if (i !== 0) {
                div.css('margin-left', '12px')
            }
            let imgDiv = $('<div>').css({'width': '100%', 'height': '216px', 'padding': '10px'});
            let img = $('<img>').css({
                'width': '100%',
                'height': '100%',
                'border-radius': '4px'
            }).attr('src', data[i].mainImageUrl);
            imgDiv.append(img);
            let fontDiv = $('<div>').css({'width': '100%', 'padding': '10px'});
            let a = $('<a>').css('color', '#000000').attr('href', '/post/detail/' + data[i].postId).attr('target', '_blank').addClass("post-hover");
            let h5 = $('<h5>').text(data[i].postTitle);
            let opacitySpan = $('<span>').css('opacity', '0.5');
            let addressAndTimeSpan = $('<span>').text(data[i].addressCategoryName + ' ' + data[i].createTime);
            let categorySpan = $('<span>').css('color', '#ffc107').text(' ' + data[i].petCategoryName);
            let typeSpan = $('<span>').css('color', TypeColor).text(' ' + data[i].postTypeName);
            opacitySpan.append(addressAndTimeSpan);
            opacitySpan.append(categorySpan);
            opacitySpan.append(typeSpan);
            fontDiv.append(h5);
            fontDiv.append(opacitySpan);
            a.append(imgDiv);
            a.append(fontDiv);
            div.append(a);
            body.append(div);
        }
    }
</script>
</body>
</html>